<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout">
      <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t("common.listInformation") }}</span>
        <Button @click="handleAdd"> 新增 </Button>
        <!-- <Button @click="handleImportData">
                    批量导入
                </Button> -->
        <!-- <Button @click="downloadTemplate"> 导出 </Button> -->
      </div>
      <div class="tableContent" :style="{ height: tableHeight + 'px' }">
        <Table
          :columns="columns"
          ref="selection"
          border
          :data="list"
          :height="tableHeight"
        >
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="handleEditRow(row)"
              ><i class="iconfont zy-common-bianji"></i>编辑</span
            >

            <span class="operationBtn" @click="handleDeleteRow(row)"
              ><i class="iconfont zy-common-shanchu"></i>删除</span
            >
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" />
        <Page
          :total="total"
          :page-size="params.pageSize"
          :current="params.current"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
        />
      </div>
    </div>

    <Modal
      :mask-closable="false"
      v-model="deleteShow"
      title="删除"
      class="modal-title-layout"
    >
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>是否确认删除?</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>

    <CreateOrUpdateModal
      :visible="createStatus"
      :form="form"
      :title="form.id ? '编辑' : '新增'"
      :handleAddSubmit="handleAddSubmit"
      :closeSubmit="closeSubmit"
      :typeList="typeList"
    />
    <importExcelModal
      :importExcelStateF="importExcelState"
      v-if="importExcelState"
      @importExcelChange="importExcelChange"
    >
    </importExcelModal>
  </div>
</template>

<script>
import ImportExcelModal from "@/components/importExcel.vue";
import fileDownload from "js-file-download";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import CreateOrUpdateModal from "./modal_open.vue";

export default {
  name: "list.vue",
  components: { ImportExcelModal, search, CreateOrUpdateModal },
  mixins: [toggleTableOperation],
  data() {
    return {
      params: {
        pageSize: 20,
        current: 1,
      },
      searchData: [
        {
          title: "设备编号",
          key: "equipmentCode",
        },
        {
          title: "设备名称",
          key: "equipmentName",
        },
      ],
      columns: [
        {
          title: "设备编号",
          key: "equipmentCode",
          align: "center",
          minWidth: 180,
          resizable: true,
        },
        {
          title: "设备名称",
          key: "equipmentName",
          align: "center",
          minWidth: 180,
          resizable: true,
        },
        {
          title: "设备品牌",
          key: "equipmentBrand",
          align: "center",
          resizable: true,
          minWidth: 180,
        },
        {
          title: "设备类别",
          key: "equipmentType",
          align: "center",
          width: 100,
          resizable: true,
          render: (h, params) => {
            console.log(params.row.equipmentType, "params", this.typeList);
            const name = this.typeList.find(
              (i) => `${i.value}` === `${params.row.equipmentType}`
            );
            return h("div", name.label);
          },
        },
        {
          title: "设备来源",
          key: "equipmentSource",
          align: "center",
          minWidth: 100,
          resizable: true,
        },
        {
          title: "设备功率(kW)",
          key: "equipmentPower",
          align: "center",
          width: 180,
          resizable: true,
        },
        {
          title: "设备重量(kg)",
          key: "equipmentWeight",
          align: "center",
          width: 180,
          resizable: true,
        },

        {
          title: "出厂编号",
          key: "leaveCode",
          align: "center",
          minWidth: 180,
          resizable: true,
        },

        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 180,
          align: "center",
        },
      ],
      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      typeList: [
        { label: "自制", value: "0" },
        { label: "内购", value: "1" },
        { label: "外购", value: "2" },
        { label: "租赁", value: "3" },
        { label: "客供", value: "4" },
      ],
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400;
    },
  },

  mounted() {
    this.getList();
  },
  methods: {
    closeSubmit() {
      this.createStatus = false;
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.getList();
    },

    importExcelChange(val) {
      this.importExcelState = false;
      if (val === "success") {
        this.$Message.success("导入成功!");
        this.changeNum();
      }
    },
    async getList() {
      try {
        const response = await this.axios.post(
          "/api/basedataEquipment/getPage",
          { ...this.params, ...this.searchParams }
        );
        if (response.code === 200) {
          console.log(response.data, "response.data.records");
          this.list = response.data.records;
          this.total = response.data.total;
        } else {
          this.$Message.warning(response.msg);
        }
      } catch (error) {
        console.error(error);
        this.$Message.error("获取列表失败");
      }
    },
    reset() {
      this.params = { pageSize: 20, current: 1 };
      this.getList();
    },
    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getList();
    },
    handleAdd() {
      this.form = {};
      this.createStatus = true;
    },
    // downloadTemplate() {
    //   const filName = "物料管理导出文档";
    //   this.axios
    //     .get("/api/basedataMaterial/exportExcel", { responseType: "blob" })
    //     .then((res) => {
    //       if (res.code === 200) {
    //         fileDownload(res, `${filName}.xlsx`);
    //       } else {
    //         this.$Message.warning("导出失败");
    //       }
    //     });
    // },
    handleImportData() {
      this.importExcelState = true;
    },
    handleAddSubmit() {
      if (this.form.id) {
        this.axios
          .put("/api/basedataEquipment/update", this.form)
          .then((res) => {

            this.currentItem = {};
            this.createStatus = false;
            this.getList();
          })
          .catch((error) => {
            console.error("Error submitting form:", error);
          });
      } else {
        this.axios
          .post("/api/basedataEquipment/save", this.form)
          .then((res) => {

            this.currentItem = {};
            this.createStatus = false;
            this.getList();
          })
          .catch((error) => {
            console.error("Error submitting form:", error);
          });
      }
    },
    handleEditRow(row) {
      this.form = {
        ...row,
        inventoryStatus: row.inventoryStatus ? 1 : 0,
        exemptionStatus: row.exemptionStatus ? 1 : 0,
      };
      this.createStatus = true;
    },
    handleDeleteRow(row) {
      this.currentItem = row;
      this.deleteShow = true;
    },
    handleDeleteSure() {
      this.axios({
        method: "DELETE",
        url: "/api/basedataEquipment/delete",
        data: { ids: [this.currentItem.id] },
      }).then((res) => {
        if (res.code === 200) {

          this.currentItem = {};
          this.deleteShow = false;
          this.getList();
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    changePageNum(val) {
      this.params.current = val;
      this.getList();
    },
    changePageSize(val) {
      this.params.pageSize = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.tableContent {
}
</style>
